<template>
  <div class="details">
      <!-- 头部 -->
      <div class="page-header">
          <div class="title">
              <p>{{commodity.product_name}}</p>
              <div class="list">
                  <ul>
                      <li>
                          <a href="##">概述</a>
                      </li>
                      <li>
                          <a href="##">参数</a>
                      </li>
                      <li>
                          <a href="##">用户评价</a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
      <!-- 头部 结束-->
      <!-- 主要内容 -->
      <div class="main">
          <!-- 左侧商品轮播图 -->
          <div class="block">
              <!-- 轮播图 -->
              <el-carousel height="560px">
                  <el-carousel-item>
                      <img style="width:560px;height:560px;" :src="commodity.product_picture" >
                  </el-carousel-item>
              </el-carousel>
            </div>
            <!-- 右侧内容区 -->
            <div class="content">
                <h1 class="name">{{commodity.product_name}}</h1>
                <p class="intro">{{commodity.product_intro}}</p>
                <p class="store">小米自营</p>
                <div class="price">
                    <span>{{commodity.product_selling_price}} 元</span>
                    <!-- v-show判断显示或隐藏 -->
                    <span class="del" v-show="commodity.product_selling_price!==commodity.product_price">{{commodity.product_price}} 元</span>
                </div>
                <div class="pro-list">
                    <span class="pro-name">{{commodity.product_name}}</span>
                    <span class="pro-price">
                        <!-- v-show判断显示或隐藏 -->
                        <span >{{commodity.product_selling_price}}元</span>
                    </span>
                     <p class="price-sum">总计: {{commodity.product_selling_price}} 元</p>
                </div>
                <!-- 内容区底部按钮 -->
                <div class="button">
                    <el-button class="shop-cart" @click="gochrt">加入购物车</el-button>
                    <el-button class="like" @click="golike">喜欢</el-button>
                </div>
                <div class="pro-policy">
                    <ul>
                        <li>
                        <i class="el-icon-circle-check"></i> 小米自营
                        </li>
                        <li>
                        <i class="el-icon-circle-check"></i> 小米发货
                        </li>
                        <li>
                        <i class="el-icon-circle-check"></i> 7天无理由退货
                        </li>
                        <li>
                        <i class="el-icon-circle-check"></i> 7天价格保护
                        </li>
                    </ul>
                </div>
            </div>
      </div>
  </div>
</template>

<script>
import {getGoodsCategory} from '@/api'
export default {
    name:"Details",
    data() {
        return {
            productList:[],  //全部数据
            num:0,           //
        }
    },
    mounted(){
        this.GoodsCategory()
    },
    methods: {
        // 获取全部数据
        async GoodsCategory() {
            const result = await getGoodsCategory();
            this.productList = result.Product;
        },
        // 点击加入购物车,收藏
        gochrt(){
            this.$notify({
                title: '成功',
                message: '该商品加入购物车',
                type: 'success'
            });
            localStorage.setItem("shopCart",JSON.stringify(this.commodity))
            this.$router.push("/shopCart")
        },
        // 点击收藏
        golike(){
            this.num++
            if(this.num === 1 ){
                this.$notify({
                    title: '成功',
                    message: '该商品加入收藏',
                    type: 'success'
                });
            }else{
                 this.$notify.error({
                    title: '错误',
                    message: '这是一条错误的提示消息'
                });
            }
        }

    },
    computed:{
        // 传过来的ID,对比总数居,展示
        commodity(){
            return this.productList.find(item=>item.product_id===this.$route.query.id*1) || {}
        }
    }
}
</script>

<style scoped lang="less">
.details{
    .page-header{
        height:64px;
        margin-top: -20px;
        z-index: 4;
        background:#fff;
        border-bottom: 1px solid #e0e0e0;
        -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.07);
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
        .title{
            width: 1220px;
            height:64px;
            line-height: 64px;
            font-size: 18px;
            color: #212121;
            margin: 0 auto;
            border-top: 1px solid #eee;
            margin-top: 17px;
            p{
                float: left;
            }
            .list{
                height:64px;
                float: right;
                li{
                    float: left;
                    margin-left: 20px;
                    a{
                        font-size: 14px;
                        color: #616161;
                    }
                }
            }
        }
       
    }
    .main{
            width: 1220px;
            height:560px;
            padding-top: 30px;
            margin:0 auto;

            .block{
                float:left;
                width: 560px;
                height:560px;
            }
            .content{
                float:left;
                margin-left: 20px;
                width: 640px;
                .name{
                    height:30px;
                    line-height: 30px;
                    font-size: 24px;
                    font-weight: normal;
                    color: #212121;
                }
                .intro{
                    color:#b0b0b0;
                    padding-top: 10px;
                    font-size:16px;
                }
                .store{
                    font-size:16px;
                    color: #ff6700;
                    padding-top: 10px;
                }
                .price{
                    display:block;
                    font-size: 18px;
                    color: #ff6700;
                    border-bottom: 1px solid #e0e0e0;
                    padding: 25px 0 25px;
                    .del{
                        font-size: 14px;
                        margin-left:10px; 
                        color: #b0b0b0;
                        // text-decoration:line-through;
                        text-decoration: line-through;

                    }
                }
                .pro-list{
                    background:#f9f9fa;
                    padding: 30px 60px;
                    margin: 50px 0 50px;
                    span{
                        line-height: 30px;
                        color: #616161;
                        font-size:16px;
                    }
                    .pro-price{
                        float: right;
                        .pro-del{
                            margin-left: 10px;
                            text-decoration: line-through;
                        }
                    }
                    .price-sum{
                        color: #ff6700;
                        font-size: 24px;
                        padding-top: 20px;
                    }
                }
                .button{
                    height: 55px;
                    margin: 10px 0 20px 0;
                    .el-button{
                        float: left;
                        height: 55px;
                        font-size: 16px;
                        color: #fff;
                        border: none;
                        text-align: center;
                    }
                    .shop-cart{
                        width: 340px;
                        background-color: #ff6700;
                    }
                    .shop-cart:hover{
                        background-color: #f25807;
                    }
                    .like{
                        background-color: #b0b0b0;
                        width: 270px;
                        margin-left: 30px;
                    }
                    .like:hover{
                         background-color: #757575;
                    }
                }
                .pro-policy{
                    li{
                        float: left;
                        margin-right: 20px;
                        color: #b0b0b0; 
                        font-size:16px;
                    }
                }
            }
    }
    .el-carousel .el-carousel__indicator .el-carousel__button {
                background-color: rgba(163, 163, 163, 0.8);
                }
   
}
</style>